<template>
    <div class="index-lists">
        <el-card class="!border-none mt-4" shadow="never">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="回款明细" name="1">
                    <div>
                        <el-button v-perms="['answer:add']" type="primary" @click="handleAdd()">
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增回款明细
                        </el-button>
                    </div>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column label="创建人" prop="creator" min-width="100" />
                        <el-table-column label="开票币别" prop="paymentCurrency" min-width="100" />
                        <el-table-column label="官费" prop="officialFee" min-width="100" />
                        <el-table-column label="回款时间" prop="topUrgent" min-width="100" />
                        <el-table-column label="回款金额" prop="amountCashed" min-width="100" />
                        <el-table-column label="回款类型" prop="paymentType" min-width="100" />
                        <el-table-column
                            label="回款代理日期"
                            prop="collectionAgentDate"
                            min-width="100"
                        />
                        <el-table-column
                            label="回款代理费"
                            prop="collectingAgencyFees"
                            min-width="100"
                        />
                        <el-table-column
                            label="收款公司账户"
                            prop="collectingCompanyAccount"
                            min-width="100"
                        />
                        <el-table-column label="开票金额" prop="invoiceAmount" min-width="100" />
                        <el-table-column label="开票时间" prop="timeBilling" min-width="100" />
                        <el-table-column label="付款方式" prop="paymentMethod" min-width="100" />
                        <el-table-column
                            label="合并回款"
                            prop="consolidatedCollection"
                            min-width="100"
                        />
                        <el-table-column label="备注" prop="remarks" min-width="100" />
                    </el-table>
                    <div class="flex justify-end mt-4">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </el-collapse-item>
                <el-collapse-item title="回款计划" name="2">
                    <div>
                        <el-button v-perms="['answer:add']" type="primary" @click="ahandleAdd()">
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增回款计划
                        </el-button>
                    </div>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column label="回款时间" prop="topUrgent" min-width="100" />
                        <el-table-column label="回款金额" prop="amountCashed" min-width="100" />
                        <el-table-column label="回款类型" prop="paymentType" min-width="100" />
                        <el-table-column label="币别" prop="currency" min-width="100" />
                        <el-table-column label="创建人" prop="creator" min-width="100" />
                        <el-table-column label="创建时间" prop="creator" min-width="100" />
                        <el-table-column label="备注" prop="remarks" min-width="100" />
                    </el-table>
                    <div class="flex justify-end mt-4">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="getLists"
            @close="showEdit = false"
            :parentData="pager"
        />
        <aedit-popup
            v-if="ashowEdit"
            ref="adeditRef"
            @success="getLists"
            @close="ashowEdit = false"
        />
      <footer-btns>
        <div style="padding: 20px">
          <el-button v-perms="['basic:add']" type="primary" @click="handleSubmit">
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            新增
          </el-button>
          <el-button
              v-perms="['customerlist:add/edit']"
              type="primary"
              @click="save()"
          >
            <template #icon>
              <icon name="el-icon-FolderChecked" />
            </template>
            保存
          </el-button>
          <el-button @click="resetParams">重置</el-button>
        </div>
      </footer-btns>
    </div>
</template>
<script lang="ts" setup name="answer">
import { answerDelete, answerLists } from '@/api/answer'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import aeditPopup from './aedit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const adeditRef = shallowRef<InstanceType<typeof aeditPopup>>()
const showEdit = ref(false)
const ashowEdit = ref(false)

const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
const queryParams = reactive({
    creator: '',
    servicer: '',
    contractId: '',
    contractName: '',
    customerName: '',
    caseName: '',
    agencyFee: '',
    contractValue: '',
    currency: '',
    paymentCurrency: '',
    officialFee: '',
    currencyid: '',
    paymentCurrencyid: '',
    remarks: '',
    topUrgentStart: '',
    topUrgentEnd: '',
    planTopUrgent: '',
    amountCashed: '',
    paymentType: '',
    collectionAgentDate: '',
    collectingAgencyFees: '',
    collectingCompanyAccount: '',
    invoiceAmount: '',
    timeBilling: '',
    paymentMethod: '',
    consolidatedCollection: '',
    invoiceNumber: '',
    payee: '',
    collectingCompanyAccountid: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: answerLists,
    params: queryParams
})

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}
const ahandleAdd = async () => {
    console.log('qqqq')
    ashowEdit.value = true
    await nextTick()
    adeditRef.value?.open('add')
}
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await answerDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

getLists()
</script>
